<template>
  <el-card
    shadow="always"
    style="margin: 2px 5px"
    :body-style="{
      padding: '20px',
      height: 'calc(100vh - 100px)',
    }"
  >
    <div class="project-wrapper">
      <ProjectCard
        v-for="project in projectStore.projectList"
        :key="project.id"
        :project="project"
        @click="selectProject(project)"
        :class="{
          'selected-project': project.id === projectStore.selectedProject.id,
        }"
      ></ProjectCard>
    </div>

    <el-card
      shadow="always"
      :body-style="{ padding: '20px', height: 'calc(100vh - 325px)' }"
    >
      <template #header
        ><span style="font-size: large; font-weight: bold"
          >【{{ projectStore.selectedProject.name }}】的报告</span
        ></template
      >
      <RouterView :key="$route.fullPath"></RouterView>
    </el-card>
  </el-card>
</template>

<script setup lang="ts">
import { useProjectStore } from "@/stores/sunnyProjectStore";
import ProjectCard from "@/views/project/ProjectCard.vue";
import { onMounted } from "vue";
import type { SunnyProject } from "@/types/sunnyProject/type";
import { useRoute, useRouter } from "vue-router";

const projectStore = useProjectStore();
const router = useRouter();
onMounted(() => {
  projectStore.listProjects();
  selectProject(projectStore.selectedProject);
});

function selectProject(sunnyProject: SunnyProject) {
  projectStore.selectedProject = sunnyProject;
  router.replace({
    name: "resultOfProject",
    params: { projectId: sunnyProject.id },
  });
}
</script>

<style scoped>
.project-wrapper {
  display: flex;
  justify-content: left;
  overflow-x: auto;
}

.project-wrapper > div {
  margin-right: 20px;
}

.project-wrapper > div:last-child {
  margin-right: 0;
}

.log-wrapper {
  background-color: black;
  border: 2px solid green;
  height: calc(100vh - 340px);
}

.selected-project {
  background-color: #a0cfff;
}
</style>
